<template>
  <view class="container">
    <!-- 视频播放器 -->
    <view class="video-player">
      <video
        id="myVideo"
        :src="videoInfo.videoUrl"
        :poster="videoInfo.coverUrl"
        :controls="false"
        :show-play-btn="false"
        :enable-progress-gesture="false"
        :loop="true"
        object-fit="contain"
        @error="videoErrorCallback"
        @play="onVideoPlay"
        @pause="onVideoPause"
        @ended="onVideoEnd"
        @timeupdate="onVideoTimeUpdate"
        @tap="toggleVideoPlay"
      ></video>
      
      <!-- 返回按钮 -->
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
    </view>

      <!-- 播放暂停按钮 -->
      <view class="play-btn" v-if="!isPlaying" @tap.stop="playVideo">
        <view class="play-btn-inner"></view>
        <text class="iconfont icon-play"></text>
      </view>
      
      <!-- 进度条 -->
      <view class="progress-bar">
        <view class="progress" :style="{width: videoProgress + '%'}"></view>
      </view>
      
      <!-- 右侧操作栏 -->
      <view class="action-bar">
        <view class="user-avatar" @tap="goToUserProfile(videoInfo.userId)">
          <image :src="videoInfo.userAvatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
          <view class="follow-btn">+</view>
    </view>
        <view class="action-item" @tap="toggleLike">
          <view class="icon-wrapper" :class="{'active': isLiked}">
        <text class="iconfont" :class="isLiked ? 'icon-like-fill' : 'icon-like'"></text>
      </view>
          <text class="count">{{videoInfo.likes || 10}}</text>
      </view>
        <view class="action-item" @tap="showComments">
          <view class="icon-wrapper">
        <text class="iconfont icon-comment"></text>
          </view>
          <text class="count">{{videoInfo.commentsCount || 2}}</text>
      </view>
        <view class="action-item" @tap="collectVideo">
          <view class="icon-wrapper" :class="{'active': isCollected}">
            <text class="iconfont" :class="isCollected ? 'icon-star-fill' : 'icon-star'"></text>
      </view>
          <text class="count">收藏</text>
    </view>
        <view class="action-item" @tap="showShare">
          <view class="icon-wrapper">
            <text class="iconfont icon-share"></text>
          </view>
          <text class="count">分享</text>
            </view>
        <view class="rotate-icon">
          <view class="record-wrapper" :class="{'rotate-active': isPlaying}">
            <image :src="videoInfo.coverUrl || '/static/images/default-music.png'" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      
      <!-- 底部信息 -->
      <view class="video-info">
        <view class="author-name">@{{videoInfo.userName || '用户昵称'}}</view>
        <view class="video-desc">{{videoInfo.title || '周末旅行 - 山风景'}}</view>
        <view class="video-tags">
          <text class="tag" v-for="(tag, index) in formatTags(videoInfo.tags || '#周末旅行 #山风景')" :key="index">#{{tag}}</text>
        </view>
      </view>
    </view>

    <!-- 评论区 -->
    <view class="comments-section" v-if="showingComments">
      <view class="section-header">
        <view class="section-title">{{videoInfo.commentsCount || 0}}条评论</view>
        <view class="close-btn" @tap="showComments">
          <text class="iconfont icon-close"></text>
        </view>
      </view>
      
      <scroll-view scroll-y class="comment-list" @scrolltolower="loadMoreComments">
        <view class="empty-comments" v-if="!comments || comments.length === 0">
          暂无评论，快来发表第一条评论吧！
        </view>
        
        <view class="comment-item" v-for="(comment, index) in comments" :key="comment.commentId">
          <image class="avatar" :src="comment.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
          <view class="content">
            <view class="user">
              <text class="name">{{comment.userName}}</text>
            </view>
            <view class="text">{{comment.comment}}</view>
            <view class="actions">
              <view class="time">{{formatDate(comment.createdAt)}}</view>
              <view class="action-group">
                <view class="like" @tap="likeComment(comment)">
                  <text class="iconfont" :class="comment.isLiked ? 'icon-like-fill' : 'icon-like'"></text>
                  <text class="like-count">{{comment.likes || 0}}</text>
                </view>
                <view class="reply-btn" @tap="replyToComment(comment)">回复</view>
              </view>
            </view>
            
            <!-- 子评论/回复 -->
            <view class="replies" v-if="comment.replies && comment.replies.length > 0">
              <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="reply.commentId">
                <view class="reply-user">
                  <text class="name">{{reply.userName}}</text>
                  <text class="reply-to">回复</text>
                  <text class="target-name">@{{comment.userName}}</text>
                </view>
                <view class="reply-content">{{reply.comment}}</view>
                <view class="reply-actions">
                  <view class="reply-time">{{formatDate(reply.createdAt)}}</view>
                  <view class="reply-like" @tap="likeComment(reply)">
                    <text class="iconfont" :class="reply.isLiked ? 'icon-like-fill' : 'icon-like'"></text>
                    <text class="like-count">{{reply.likes || 0}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <view v-if="hasMoreComments" class="load-more">
          <uni-load-more status="loading"></uni-load-more>
        </view>
        
        <view v-if="!hasMoreComments && comments.length > 0" class="no-more">
          <uni-load-more status="noMore" :contentText="{ contentnomore: '没有更多评论了' }"></uni-load-more>
        </view>
      </scroll-view>
      
      <!-- 评论输入框 -->
      <view class="comment-input">
        <view class="input-wrapper">
          <input 
            type="text" 
            v-model="commentContent" 
            :placeholder="replyTo ? `回复 ${replyTo.userName}：` : '善语结善缘，恶言伤人心'" 
            :focus="inputFocus"
            @blur="onInputBlur"
            @focus="onInputFocus"
          />
        </view>
        <view class="emoji-btn" @tap="toggleEmojiPanel">
          <text class="iconfont icon-emoji"></text>
        </view>
        <view class="at-btn">
          <text class="iconfont icon-at"></text>
        </view>
        <button @tap="submitComment" :disabled="!commentContent.trim()" :style="{opacity: commentContent.trim() ? 1 : 0.5}">发送</button>
      </view>
      
      <!-- 表情面板 -->
      <view class="emoji-panel" v-if="showEmojiPanel">
        <scroll-view scroll-y class="emoji-list">
          <view class="emoji-grid">
            <view 
              class="emoji-item" 
              v-for="(emoji, index) in emojiList" 
              :key="index"
              @tap="insertEmoji(emoji)"
            >
              {{emoji}}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { getVideoDetail, getVideoComments, addVideoComment, likeVideo, likeComment } from '@/api/video.js';

export default {
  data() {
    return {
      videoId: null,
      videoInfo: {},
      isLiked: false,
      showingComments: false,
      comments: [],
      commentPage: 1,
      commentSize: 10,
      hasMoreComments: false,
      relatedVideos: [],
      commentContent: '',
      loading: true,
      replyTo: null, // 回复的评论对象
      userId: 1, // 当前登录用户ID，实际应该从用户状态获取
      isPlaying: false,
      videoProgress: 0,
      inputFocus: false,
      showEmojiPanel: false,
      emojiList: ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤔', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮', '🤐', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '😬', '😰', '😱', '😳', '😵', '😡', '😠', '😷', '🤒', '🤕', '🤢', '🤧', '😇', '🤠', '🤡', '🤥', '🤓', '😈', '👿', '👹', '👺', '💀', '👻', '👽', '🤖', '💩', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾']
    }
  },
  onLoad(options) {
    if (options.videoId) {
      this.videoId = options.videoId;
      this.loadVideoDetail();
      
      // 如果传入了showComments参数，则自动显示评论区
      if (options.showComments === 'true') {
        this.showComments();
      }
    }
  },
  methods: {
    // 加载视频详情
    async loadVideoDetail() {
      this.loading = true;
      try {
        const res = await getVideoDetail(this.videoId);
        if (res.code === 200) {
          this.videoInfo = res.data;
          console.log('视频详情:', this.videoInfo);
          
          // 加载相关视频和评论
          this.loadRelatedVideos();
          this.loadComments();
        } else {
          uni.showToast({
            title: res.errorMessage || '获取视频详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取视频详情出错:', error);
        uni.showToast({
          title: '获取视频详情失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 加载相关视频
    async loadRelatedVideos() {
      // TODO: 调用获取相关视频的API
      // 暂时使用模拟数据
      this.relatedVideos = [
        {
          videoId: 2,
          title: '西湖美景',
          coverUrl: 'http://101.37.17.240:9000/shzy/cover2.jpg',
          location: '杭州西湖风景区'
        },
        {
          videoId: 3,
          title: '故宫探秘',
          coverUrl: 'http://101.37.17.240:9000/shzy/cover3.jpg',
          location: '北京故宫博物院'
        }
      ];
    },
    
    // 加载评论
    async loadComments(isLoadMore = false) {
      if (!isLoadMore) {
        this.commentPage = 1;
        this.comments = [];
      }
      
      try {
        const res = await getVideoComments(this.videoId);
        if (res.code === 200) {
          const commentData = res.data;
          
          // 处理评论数据，将回复整合到父评论下
          const parentComments = [];
          const replyMap = {};
          
          // 如果接口返回的是分页数据
          const commentList = commentData.list || commentData;
          
          // 先将所有回复按照parentId分组
          commentList.forEach(comment => {
            if (comment.parentId) {
              if (!replyMap[comment.parentId]) {
                replyMap[comment.parentId] = [];
              }
              replyMap[comment.parentId].push(comment);
            }
          });
          
          // 再处理所有父评论，并添加对应的回复
          commentList.forEach(comment => {
            if (!comment.parentId) {
              comment.replies = replyMap[comment.commentId] || [];
              parentComments.push(comment);
            }
          });
          
          if (isLoadMore) {
            this.comments = [...this.comments, ...parentComments];
          } else {
            this.comments = parentComments;
          }
          
          // 更新是否有更多评论
          if (commentData.hasNextPage !== undefined) {
            this.hasMoreComments = commentData.hasNextPage;
          } else {
            this.hasMoreComments = false;
          }
          
          // 将结果存入本地
          console.log('评论数据:', this.comments);
        } else {
          uni.showToast({
            title: res.errorMessage || '获取评论失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取评论出错:', error);
        uni.showToast({
          title: '获取评论失败',
          icon: 'none'
        });
      }
    },
    
    // 加载更多评论
    loadMoreComments() {
      if (this.hasMoreComments) {
        this.commentPage++;
        this.loadComments(true);
      }
    },
    
    // 视频播放错误处理
    videoErrorCallback(e) {
      console.error('视频错误信息:', e.detail.errMsg);
      uni.showToast({
        title: '视频播放失败',
        icon: 'none'
      });
    },
    
    // 点赞/取消点赞视频
    async toggleLike() {
      const oldStatus = this.isLiked;
      this.isLiked = !this.isLiked;
      
      if (this.isLiked) {
        this.videoInfo.likes = (this.videoInfo.likes || 0) + 1;
      } else {
        this.videoInfo.likes = Math.max((this.videoInfo.likes || 0) - 1, 0);
      }
      
      try {
        const res = await likeVideo(this.videoId, this.userId, this.isLiked);
        if (res.code !== 200) {
          // 如果请求失败，恢复之前的状态
          this.isLiked = oldStatus;
          if (oldStatus) {
            this.videoInfo.likes = (this.videoInfo.likes || 0) + 1;
          } else {
            this.videoInfo.likes = Math.max((this.videoInfo.likes || 0) - 1, 0);
          }
          
          uni.showToast({
            title: res.errorMessage || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('点赞操作出错:', error);
        
        // 恢复之前的状态
        this.isLiked = oldStatus;
        if (oldStatus) {
          this.videoInfo.likes = (this.videoInfo.likes || 0) + 1;
        } else {
          this.videoInfo.likes = Math.max((this.videoInfo.likes || 0) - 1, 0);
        }
        
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      }
    },
    
    // 显示评论区
    showComments() {
      this.showingComments = !this.showingComments;
      
      // 打开评论区时，加载评论
      if (this.showingComments && this.comments.length === 0) {
        this.loadComments();
      }
    },
    
    // 点赞/取消点赞评论
    async likeComment(comment) {
      const oldStatus = comment.isLiked;
      comment.isLiked = !comment.isLiked;
      
      if (comment.isLiked) {
        comment.likes = (comment.likes || 0) + 1;
      } else {
        comment.likes = Math.max((comment.likes || 0) - 1, 0);
      }
      
      try {
        const res = await likeComment(comment.commentId, this.userId, comment.isLiked);
        if (res.code !== 200) {
          // 如果请求失败，恢复之前的状态
          comment.isLiked = oldStatus;
          if (oldStatus) {
            comment.likes = (comment.likes || 0) + 1;
          } else {
            comment.likes = Math.max((comment.likes || 0) - 1, 0);
          }
          
          uni.showToast({
            title: res.errorMessage || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('点赞评论操作出错:', error);
        
        // 恢复之前的状态
        comment.isLiked = oldStatus;
        if (oldStatus) {
          comment.likes = (comment.likes || 0) + 1;
        } else {
          comment.likes = Math.max((comment.likes || 0) - 1, 0);
        }
        
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      }
    },
    
    // 回复评论
    replyToComment(comment) {
      this.replyTo = comment;
      // 获取评论输入框焦点
      setTimeout(() => {
        uni.createSelectorQuery().select('.comment-input input').focus().exec();
      }, 100);
    },
    
    // 输入框获取焦点
    onInputFocus() {
      this.inputFocus = true;
      this.showEmojiPanel = false;
    },
    
    // 输入框失去焦点
    onInputBlur() {
      this.inputFocus = false;
      
      if (!this.commentContent) {
        setTimeout(() => {
          this.replyTo = null;
        }, 200);
      }
    },
    
    // 提交评论
    async submitComment() {
      if (!this.commentContent.trim()) {
        uni.showToast({
          title: '评论内容不能为空',
          icon: 'none'
        });
        return;
      }
      
      try {
        const parentId = this.replyTo ? this.replyTo.commentId : null;
        const res = await addVideoComment(this.videoId, this.userId, this.commentContent, parentId);
        
        if (res.code === 200) {
          // 评论成功后重新加载评论
          this.loadComments();
          this.commentContent = '';
          this.replyTo = null;
          
          // 更新评论数量
          this.videoInfo.commentsCount = (this.videoInfo.commentsCount || 0) + 1;
          
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: res.errorMessage || '评论失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('提交评论出错:', error);
        uni.showToast({
          title: '评论失败',
          icon: 'none'
        });
      }
    },
    
    // 分享视频
    showShare() {
      uni.showShareMenu({
        withShareTicket: true
      });
    },
    
    // 去视频详情
    goToVideo(videoId) {
      uni.navigateTo({
        url: `/pages/video/detail?videoId=${videoId}`
      });
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    // 格式化标签
    formatTags(tagsString) {
      if (!tagsString) return [];
      return tagsString.split(',').map(tag => tag.trim());
    },
    
    // 视频播放处理
    onVideoPlay() {
      this.isPlaying = true;
      const videoContext = uni.createVideoContext('myVideo', this);
      videoContext.play();
    },
    
    onVideoPause() {
      this.isPlaying = false;
      const videoContext = uni.createVideoContext('myVideo', this);
      videoContext.pause();
    },
    
    onVideoEnd() {
      this.isPlaying = false;
      // 视频播放结束后自动重新播放
      setTimeout(() => {
        this.playVideo();
      }, 500);
    },
    
    onVideoTimeUpdate(e) {
      this.videoProgress = Math.round((e.detail.currentTime / e.detail.duration) * 100);
    },
    
    toggleVideoPlay() {
      if (this.isPlaying) {
        this.onVideoPause();
      } else {
        this.playVideo();
      }
    },
    
    playVideo() {
      const videoContext = uni.createVideoContext('myVideo', this);
      videoContext.play();
      this.isPlaying = true;
    },
    
    // 切换表情面板
    toggleEmojiPanel() {
      this.showEmojiPanel = !this.showEmojiPanel;
      if (this.showEmojiPanel) {
        // 关闭键盘
        uni.hideKeyboard();
        this.inputFocus = false;
      }
    },
    
    // 插入表情
    insertEmoji(emoji) {
      this.commentContent += emoji;
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #000;
  box-sizing: border-box;
}

.video-player {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  
  video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .back-btn {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    width: 80rpx;
    height: 80rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    
    .iconfont {
      font-size: 40rpx;
      color: #fff;
    }
  }
  
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    
    .play-btn-inner {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      margin-bottom: 10rpx;
    }
    
    .iconfont {
      font-size: 60rpx;
      color: #fff;
    }
  }
  
  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background: rgba(255, 255, 255, 0.3);
    z-index: 5;
    
    .progress {
      height: 100%;
      background-color: #fe2c55;
      transition: width 0.1s linear;
    }
  }
  
  .action-bar {
    position: absolute;
    right: 20rpx;
    bottom: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    
    .user-avatar {
      position: relative;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-bottom: 40rpx;
      border: 4rpx solid #fff;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      
      .follow-btn {
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 40rpx;
        background-color: #fe2c55;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    
    .action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40rpx;
      
      .icon-wrapper {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;
        
        &.active {
          background: rgba(255, 255, 255, 0.3);
          
          .iconfont {
            color: #fe2c55;
          }
        }
      }
      
      .iconfont {
        font-size: 50rpx;
        color: #fff;
      }
      
      .count {
        font-size: 26rpx;
        color: #fff;
        margin-top: 6rpx;
      }
    }
    
    .rotate-icon {
      margin-top: 40rpx;
      
      .record-wrapper {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        border: 4rpx solid #fff;
        overflow: hidden;
        animation: rotate 8s linear infinite;
        animation-play-state: paused;
        
        &.rotate-active {
          animation-play-state: running;
        }
        
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  
  .video-info {
    position: absolute;
    left: 20rpx;
    bottom: 180rpx;
    width: 65%;
    z-index: 5;
    color: #fff;
    
    .author-name {
      margin-bottom: 10rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
    
    .video-desc {
          font-size: 28rpx;
      color: #fff;
      margin-bottom: 10rpx;
      word-break: break-all;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    
    .video-tags {
      display: flex;
      flex-wrap: wrap;
      
      .tag {
        font-size: 28rpx;
        color: #fff;
        margin-right: 12rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}

.comments-section {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    padding: 30rpx;
    border-bottom: 1rpx solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    }
    
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 40rpx;
        color: #666;
      }
    }
  }
  
  .comment-list {
    flex: 1;
    padding: 20rpx 30rpx;
    
    .empty-comments {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200rpx;
      color: #999;
      font-size: 28rpx;
  }
  
  .comment-item {
    display: flex;
    margin-bottom: 30rpx;
    
    .avatar {
        width: 70rpx;
        height: 70rpx;
      border-radius: 50%;
      margin-right: 20rpx;
        flex-shrink: 0;
    }
    
    .content {
      flex: 1;
      
      .user {
          margin-bottom: 8rpx;
        
        .name {
          font-size: 28rpx;
            font-weight: bold;
            color: #333;
          }
        }
        
        .text {
          font-size: 30rpx;
          color: #333;
          line-height: 1.4;
          margin-bottom: 10rpx;
          word-break: break-all;
        }
        
        .actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
        
        .time {
          font-size: 24rpx;
          color: #999;
          }
          
          .action-group {
        display: flex;
        align-items: center;
        
        .like {
          display: flex;
          align-items: center;
              margin-right: 20rpx;
          
          .iconfont {
            font-size: 32rpx;
            color: #999;
                margin-right: 4rpx;
                
                &.icon-like-fill {
                  color: #fe2c55;
                }
              }
              
              .like-count {
            font-size: 24rpx;
            color: #999;
          }
        }
        
            .reply-btn {
          font-size: 24rpx;
          color: #999;
            }
          }
        }
        
        .replies {
          background-color: #f8f8f8;
          border-radius: 8rpx;
          padding: 16rpx;
          margin-bottom: 10rpx;
          
          .reply-item {
            margin-bottom: 16rpx;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .reply-user {
              display: flex;
              align-items: center;
              margin-bottom: 8rpx;
              
              .name {
                font-size: 26rpx;
                font-weight: bold;
                color: #333;
              }
              
              .reply-to {
                font-size: 26rpx;
                color: #999;
                margin: 0 6rpx;
              }
              
              .target-name {
                font-size: 26rpx;
                color: #576b95;
              }
            }
            
            .reply-content {
              font-size: 28rpx;
              color: #333;
              line-height: 1.4;
              margin-bottom: 8rpx;
            }
            
            .reply-actions {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .reply-time {
                font-size: 22rpx;
                color: #999;
              }
              
              .reply-like {
                display: flex;
                align-items: center;
                
                .iconfont {
                  font-size: 28rpx;
                  color: #999;
                  margin-right: 4rpx;
                  
                  &.icon-like-fill {
                    color: #fe2c55;
                  }
                }
                
                .like-count {
                  font-size: 22rpx;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
    
    .load-more, .no-more {
      padding: 20rpx 0;
      text-align: center;
    }
  }
  
  .comment-input {
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #f1f1f1;
    background-color: #fff;
    
    .input-wrapper {
      flex: 1;
      background-color: #f8f8f8;
      border-radius: 36rpx;
      height: 72rpx;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      input {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
      }
    }
    
    .emoji-btn, .at-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 40rpx;
        color: #999;
      }
    }
    
    .at-btn {
      margin-right: 20rpx;
    }
    
    button {
      background-color: #fe2c55;
      color: #fff;
      border-radius: 36rpx;
      font-size: 28rpx;
      padding: 0 30rpx;
      height: 72rpx;
      line-height: 72rpx;
      
      &[disabled] {
        background-color: #faa0b5;
      }
    }
  }
  
  .emoji-panel {
    height: 400rpx;
    background-color: #f8f8f8;
    padding: 20rpx;
    
    .emoji-list {
      height: 100%;
      
      .emoji-grid {
        display: flex;
        flex-wrap: wrap;
        
        .emoji-item {
          width: 70rpx;
          height: 70rpx;
          font-size: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 10rpx;
        }
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 